<template>
    <div>
        <Modal v-model="modal.add" title="添加" :mask-closable="false" @on-visible-change="changeModalVisibleResetForm('addForm', $event)" width="760">
            <Form ref="addForm" :model="form" :label-width="80" :rules="validateRules">
                <Row>
	<i-col span="12">
	<FormItem label="商品类目编号" prop="categoryId">
	<InputNumber v-model="form.categoryId" placeholder="请输入商品类目编号" style="width: 100%;"/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="店铺编号" prop="shopId">
	<InputNumber v-model="form.shopId" placeholder="请输入店铺编号" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="商品编号" prop="goodsId">
	<InputNumber v-model="form.goodsId" placeholder="请输入商品编号" style="width: 100%;"/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="商品SKU编号" prop="goodsSkuId">
	<InputNumber v-model="form.goodsSkuId" placeholder="请输入商品SKU编号" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="优惠券标题" prop="title">
	<Input v-model="form.title" placeholder="请输入优惠券标题" clearable/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="最小消费金额（元）" prop="useMinAmount">
	<InputNumber v-model="form.useMinAmount" placeholder="请输入最小消费金额（元）" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="满减优惠金额（元）" prop="discountAmount">
	<InputNumber v-model="form.discountAmount" placeholder="请输入满减优惠金额（元）" style="width: 100%;"/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="满减折扣" prop="discountPercent">
	<InputNumber v-model="form.discountPercent" placeholder="请输入满减折扣" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="赠送积分" prop="integralAmount">
	<InputNumber v-model="form.integralAmount" placeholder="请输入赠送积分" style="width: 100%;"/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="优惠券总量" prop="totalCount">
	<InputNumber v-model="form.totalCount" placeholder="请输入优惠券总量" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="优惠券使用范围" prop="couponUsableRange">
	<InputNumber v-model="form.couponUsableRange" placeholder="请输入优惠券使用范围" style="width: 100%;"/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="优惠券类型" prop="couponType">
	<InputNumber v-model="form.couponType" placeholder="请输入优惠券类型" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="开始时间" prop="startTime">
	<DatePicker @on-change="form.startTime=$event" :value="form.startTime" placeholder="请输入开始时间" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></DatePicker>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="到期时间" prop="dueTime">
	<DatePicker @on-change="form.dueTime=$event" :value="form.dueTime" placeholder="请输入到期时间" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></DatePicker>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="有效时间" prop="validDays">
	<InputNumber v-model="form.validDays" placeholder="请输入有效时间" style="width: 100%;"/>
</FormItem>
	</i-col>
</Row>

            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="resetFormCancelModal('addForm', 'add')">取消</Button>
                <Button type="primary" size="large" @click="add" :loading="loading.add">添加</Button>
            </div>
        </Modal>
        <Modal v-model="modal.edit" title="修改" :mask-closable="false" @on-visible-change="changeModalVisibleResetForm('editForm', $event)" width="760">
            <Form ref="editForm" :model="form" :label-width="80" :rules="validateRules">
                <Row>
	<i-col span="12">
	<FormItem label="商品类目编号" prop="categoryId">
	<InputNumber v-model="form.categoryId" placeholder="请输入商品类目编号" style="width: 100%;"/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="店铺编号" prop="shopId">
	<InputNumber v-model="form.shopId" placeholder="请输入店铺编号" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="商品编号" prop="goodsId">
	<InputNumber v-model="form.goodsId" placeholder="请输入商品编号" style="width: 100%;"/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="商品SKU编号" prop="goodsSkuId">
	<InputNumber v-model="form.goodsSkuId" placeholder="请输入商品SKU编号" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="优惠券标题" prop="title">
	<Input v-model="form.title" placeholder="请输入优惠券标题" clearable/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="最小消费金额（元）" prop="useMinAmount">
	<InputNumber v-model="form.useMinAmount" placeholder="请输入最小消费金额（元）" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="满减优惠金额（元）" prop="discountAmount">
	<InputNumber v-model="form.discountAmount" placeholder="请输入满减优惠金额（元）" style="width: 100%;"/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="满减折扣" prop="discountPercent">
	<InputNumber v-model="form.discountPercent" placeholder="请输入满减折扣" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="赠送积分" prop="integralAmount">
	<InputNumber v-model="form.integralAmount" placeholder="请输入赠送积分" style="width: 100%;"/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="优惠券总量" prop="totalCount">
	<InputNumber v-model="form.totalCount" placeholder="请输入优惠券总量" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="优惠券使用范围" prop="couponUsableRange">
	<InputNumber v-model="form.couponUsableRange" placeholder="请输入优惠券使用范围" style="width: 100%;"/>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="优惠券类型" prop="couponType">
	<InputNumber v-model="form.couponType" placeholder="请输入优惠券类型" style="width: 100%;"/>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="开始时间" prop="startTime">
	<DatePicker @on-change="form.startTime=$event" :value="form.startTime" placeholder="请输入开始时间" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></DatePicker>
</FormItem>
	</i-col><i-col span="12">
	<FormItem label="到期时间" prop="dueTime">
	<DatePicker @on-change="form.dueTime=$event" :value="form.dueTime" placeholder="请输入到期时间" type="datetime" format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" clearable></DatePicker>
</FormItem>
	</i-col>

	<i-col span="12">
	<FormItem label="有效时间" prop="validDays">
	<InputNumber v-model="form.validDays" placeholder="请输入有效时间" style="width: 100%;"/>
</FormItem>
	</i-col>
</Row>

            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="resetFormCancelModal('editForm', 'edit')">取消</Button>
                <Button type="primary" size="large" @click="edit" :loading="loading.edit">修改</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: 'GoodsCouponAddEdit',
        data() {
            return {
                modal: {
                    add: false,
                    edit: false
                },
                loading: {
                    add: false,
                    edit: false
                },
                urls: {
                    addUrl: '/goods-coupon/admin/save',
                    batchAddUrl: '/goods-coupon/admin/batch-save',
                    editUrl: '/goods-coupon/admin/update',
                    batchEditUrl: '/goods-coupon/admin/batch-update'
                },
                form: {
                    categoryId: null,
shopId: null,
goodsId: null,
goodsSkuId: null,
title: null,
useMinAmount: null,
discountAmount: null,
discountPercent: null,
integralAmount: null,
totalCount: null,
couponUsableRange: null,
couponType: null,
startTime: null,
dueTime: null,
validDays: null,

                },
                validateRules: {
                    title: [
{type: 'string', required: true, message: '此项为必须项', trigger: 'blur'},
{type: 'string', min: 1, max: 50, message: '必须1-50个字符', trigger: 'blur'}
],
totalCount: [
{type: 'integer', required: true, message: '此项为必须项', trigger: 'blur, change'}
],
couponUsableRange: [
{type: 'integer', required: true, message: '此项为必须项', trigger: 'blur, change'}
],
couponType: [
{type: 'integer', required: true, message: '此项为必须项', trigger: 'blur, change'}
],
startTime: [
{type: 'string', required: true, message: '此项为必须项', trigger: 'blur'}
],

                }
            }
        },
        computed: {},
        mounted() {},
        methods: {
            changeModalVisibleResetForm(formRef, visible) {
                if (!visible) {
                    this.$refs[formRef].resetFields()
                }
            },
            resetFormCancelModal(formRef, modal) {
                this.modal[modal] = false
                this.$refs[formRef].resetFields()
            },
            add() {
                this.$emit('add')
            },
            edit() {
                this.$emit('edit')
            }
        }
    }
</script>

<style>
</style>
